@charset "utf-8";
//计算根的像素大小
@function r($px) {
    @return ($px / 40) *1rem;
}

//计算减半的函数
@function half($px) {
    @return ($px / 2) *1px;
}

$color_them: #ffa969;
$font_size:r(30);
@mixin a_block {
    display: block;
    width: 100%;
    height: 100%;
}

@mixin middle {
    vertical-align: middle;
    display: inline-block;
}

html,
body {
    height: 100%;
    position: relative;
}

// 头部
.header {
    position: absolute;
    top: 0;
    width: r(750);
    height: half(123);
    padding: half(48) half(23) half(20);
    box-sizing: border-box;
    text-align: center;
    .back {
        border: 1px solid $color_them;
        padding: half(15) half(31);
        border-radius: half(17);
        h2 {
            font-size: half(26);
        }
    }
    h1 {
        font-size: r(26);
        margin: half(16) auto 0;
    }
}

// 主体部分
#main {
    position: absolute;
    top: half(123);
    bottom: half(135);
    width: r(750);
    padding: 0 half(23);
    box-sizing: border-box;
    //多出部分滚动
    overflow: scroll;
    // 滚动条产生滚动回弹的效果
    -webkit-overflow-scrolling: touch;
}

// 轮播图
.banner {
    position: relative;
    box-sizing: border-box;
    text-align: center;
    .swiper-wrapper {
        display: flex;
        margin: 0 half(4) r(68);
    }
    .swiper-slide {
        flex: auto;
        text-align: center;
        width: r(148);
        height: r(149);
        margin-right: r(34);
        &:last-child {
            margin-right: 0;
        }
        img {
            width: 100%;
        }
        h2 {
            font-size: r(26);
            margin-top: r(9);
        }
    }
    .swiper-pagination {
        span {
            display: inline-block;
            width: r(18);
            height: r(18);
            border-radius: 50%;
            background: #ffc9a1;
            margin: 0 r(8);
            &.active {
                background: $color_them;
            }
        }
    }
}

// 美食
.food,
.sports,
.movie {
    .content_dd {
        height: r(48);
        margin-left: r(8);
        padding-top: r(16);
        .info_left {
            font-size: 0;
            .info_left_img,
            h2 {
                @include middle;
            }
            .info_left_img {
                width: r(52);
                height: r(53);
                img {
                    width: 100%;
                }
            }
            h2 {
                margin-left: r(8);
                font-size: $font_size;
            }
        }
        .info_right {
            font-size: 0;
            margin-top: r(9);
            h2,
            .more {
                @include middle;
            }
            h2 {
                font-size: r(24);
                margin-right: r(8);
            }
            .more {
                width: r(25);
                height: r(26);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
    .content_dd_sport {
        height: r(58);
        padding-top: r(17);
    }
    .content_dd_movie {
        height: r(52);
        padding-top: r(29);
    }
    .food_detail,
    .sports_detail,
    .movie_detail {
        ul {
            display: flex;
            li {
                flex: auto;
                width: r(133);
                height: r(133);
                margin-right: r(58);
                margin-top: r(38);
                a {
                    @include a_block;
                    img {
                        width: 100%;
                    }
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}